import React from 'react'

//导入路由模块
/**
 * HashRouter: 路由的根容器，所有跟路由相关的东西都要包裹在这里边,而且一个网站中，只需要使用一个HashRouter就OK
 * Route: 路由规则，包含了两个属性，path component
 * Link： 链接类似于vue中的router-link,会被渲染成一个a标签
*/
import {HashRouter,Route,Link} from 'react-router-dom'



//导入路由组件
import Home from '@/components/Home'
import Movie from '@/components/Movie'
import About from '@/components/About'


//使用第三方UI库ant

// 由于采用按需导入，此处全局导入的样式表就可以省略导入了
// import 'antd/dist/antd.css'
import { DatePicker } from 'antd';
export default class App extends React.Component{
    constructor(props){
        super()
        this.state = {}
    }
    render(){
        /**
         * 使用HashRouter，表示该网站已经启用路由
         * 在HashRouter下只能有唯一的一个根元素
         * 在一个网站中只需要使用一次<HashRouter></HashRouter>即可
         * */


        return <HashRouter>
            <div>
                <DatePicker />
                <h1>网站App根组件</h1>
                
                <hr/>
                <Link to="/home">首页</Link>&nbsp;&nbsp;
                <Link to="/movie/top250/10">电影</Link>&nbsp;&nbsp;
                <Link to="/about">关于</Link>&nbsp;

                <hr/>

                {/* Route 创建的标签就是路由规则，path表示要匹配的路由，component表示要展示的组件 */}
                {/* 默认中的路由规则是模糊匹配的，如果路由可以部分匹配成功，就会展示该路由对应的组件 */}
                {/* 如果想精确匹配路由，可以添加exact属性 */}
                {/* 如果想匹配参数，可以使用:修饰符 */}
                <Route path="/home" component={Home}></Route>

                <hr/>

                <Route exact path="/movie/:type/:id" component={Movie}></Route>

                <hr/> 

                <Route path="/about" component={About}></Route>

            </div>
        </HashRouter>
    }
}